如何循环遍历document.querySelectorAll()方法返回的结果 | 您所在的位置:网站首页 › python css selector遍历多个标签 › 如何循环遍历document.querySelectorAll()方法返回的结果 |
使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它: /* Will Not Work */ document.querySelectorAll(’.module’).forEach(function() { }); 执行上面的代码,你将会得到执行错误的异常信息。这是因为,document.querySelectorAll()返回的不是一个数组,而是一个NodeList。 对于一个NodeList,我们可以用下面的技巧来循环遍历它: var divs = document.querySelectorAll(‘div’); [].forEach.call(divs, function(div) { // do whatever div.style.color = “red”; }); 当然,我们也可以用最传统的方法遍历它: var divs = document.querySelectorAll(‘div’), i; for (i = 0; i < divs.length; ++i) { divs[i].style.color = “green”; } 还有一种更好的方法,就是自己写一个: // forEach method, could be shipped as part of an Object Literal/Module var forEach = function (array, callback, scope) { for (var i = 0; i < array.length; i++) { callback.call(scope, i, array[i]); // passes back stuff we need } }; // 用法: // optionally change the scope as final parameter too, like ECMA5 var myNodeList = document.querySelectorAll(‘li’); forEach(myNodeList, function (index, value) { console.log(index, value); // passes index + value back! }); 还有一种语法:for…of 循环,但似乎只有Firefox支持: /* Be warned, this only works in Firefox */ var divs = document.querySelectorAll('div ); for (var div of divs) { div.style.color = “blue”; } 最后是一种不推荐的方法:给NodeList扩展一个forEach方法: NodeList.prototype.forEach = Array.prototype.forEach; var divs = document.querySelectorAll(‘div’).forEach(function(el) { el.style.color = “orange”; }) 另外可参考MDN上这篇文章 文章转载自:http://www.webhek.com/post/foreach-queryselectorall-nodelist.html |
CopyRight 2018-2019 实验室设备网 版权所有 |